 <template>
<div>
    <router-link class="header-ase" tag="div" to="/"  v-show="work">

      <div class="iconfont back-icof">&#xe624;</div></router-link>

    <div class="header-fixed" v-show="!work"
    :style="opacitystyle"
    >  <router-link to="/">
       <div class="iconfont header-icof">&#xe624;</div>
       </router-link>景点详情</div>
    </div>
</template>
<script>
export default {
  name:'detailheader',
  data () {
    return {
      work :true,
      opacitystyle:{
        opacity:0
      }
    }
  },
  methods:{
handlescroll () {
  const top =document.documentElement.scrollTop
  if(top>60 ){
    let opacity=top/140 
    opacity=opacity>1 ? 1: opacity
    this.opacitystyle={
      opacity
    }
  this.work=false
  }
 else{ this.work=true}
}
  },
 activated() {
   window.addEventListener('scroll',this.handlescroll)
 },
 deactivated(){
   window.removeEventListener('scroll',this.handlescroll)
 }

}
</script>
<style lang="stylus" scoped>
@import '~styles/vieble.styl';
.header-ase
  position:absolute
  left :.2rem
  top :.2rem
  width :.8rem
  height :.8rem
  text-align: center
  line-height :.8rem
  border-radius :.4rem
  background :rgba(0,0,0,.8)
  .back-icof
    font-size: .4rem
    color :#fff
.header-fixed
       z-index :2
       position: fixed
       top:0
       left :0
       right :0
       height :$cdheigt
       line-height :$cdheigt
       text-align :center
       color :#fff
       background :$bgcolor
       font-size :.32rem
       .header-icof
          position :absolute
          top :0
          left :0
          right :0
          width :.64rem
          text-align :center
          font-size :.4rem
          color :#fff
        

</style>
